<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主产品</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <link rel="stylesheet" href="../../css/common.css">
<!--    <link rel="stylesheet" href="../../css/swiper.min.css">-->
    <link rel="stylesheet" href="../../css/style.css">
    <style>
      .product_page{
        width: 800px;
        /*background-color: #0c1021;*/
      }
      .box{
        /*width: 160px;*/
        color: #ffffff;
      }
      .item{
        width: 260px;
        margin-bottom: 30px;
        margin-right: 10px;
      }
      .item:nth-child(3n){
        margin-right: 0;
      }
      .left-chart{
        width: 90px;
        height: 90px;
        margin-right: 10px;
      }
      .title {
        margin-bottom: 10px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        /*font-family: youshebiaotihei;*/
      }
      .amount{
        width: 100%;
        font-size: 16px;
      }
      .name{
        width: 60px;
      }
      .value{
        width: 75px;
        color: #f7f40a;
        text-align: right;
      }

    </style>

</head>
<body class="product_page">

<div class="box fix">
  <!--<div class="item l fix">
    <div class="left-chart l" id="chart1"></div>
    <div class="right-info l">
      <div class="title">镍</div>
      <div class="amount fix">
        <div class="name l">日产量:</div>
        <div class="value day l">4514</div>
        <div class="unit l">吨</div>
      </div>
      <div class="amount fix">
        <div class="name l">月产量:</div>
        <div class="value mounth l">45144514</div>
        <div class="unit l">吨</div>
      </div>
    </div>
  </div>
  <div class="item l fix">
    <div class="left-chart l"></div>
    <div class="right-info l">
      <div class="title">镍</div>
      <div class="amount fix">
        <div class="name l">日产量:</div>
        <div class="value day l">4514</div>
        <div class="unit l">吨</div>
      </div>
      <div class="amount fix">
        <div class="name l">月产量:</div>
        <div class="value mounth l">45144514</div>
        <div class="unit l">吨</div>
      </div>
    </div>
  </div>
  <div class="item l fix">
    <div class="left-chart l"></div>
    <div class="right-info l">
      <div class="title">镍</div>
      <div class="amount fix">
        <div class="name l">日产量:</div>
        <div class="value day l">4514</div>
        <div class="unit l">吨</div>
      </div>
      <div class="amount fix">
        <div class="name l">月产量:</div>
        <div class="value mounth l">45144514</div>
        <div class="unit l">吨</div>
      </div>
    </div>
  </div>
  <div class="item l fix">
    <div class="left-chart l"></div>
    <div class="right-info l">
      <div class="title">镍</div>
      <div class="amount fix">
        <div class="name l">日产量:</div>
        <div class="value day l">4514</div>
        <div class="unit l">吨</div>
      </div>
      <div class="amount fix">
        <div class="name l">月产量:</div>
        <div class="value mounth l">45144514</div>
        <div class="unit l">吨</div>
      </div>
    </div>
  </div>
  <div class="item l fix">
    <div class="left-chart l"></div>
    <div class="right-info l">
      <div class="title">镍</div>
      <div class="amount fix">
        <div class="name l">日产量:</div>
        <div class="value day l">4514</div>
        <div class="unit l">吨</div>
      </div>
      <div class="amount fix">
        <div class="name l">月产量:</div>
        <div class="value mounth l">45144514</div>
        <div class="unit l">吨</div>
      </div>
    </div>
  </div>
  <div class="item l fix">
    <div class="left-chart l"></div>
    <div class="right-info l">
      <div class="title">镍</div>
      <div class="amount fix">
        <div class="name l">日产量:</div>
        <div class="value day l">4514</div>
        <div class="unit l">吨</div>
      </div>
      <div class="amount fix">
        <div class="name l">月产量:</div>
        <div class="value mounth l">45144514</div>
        <div class="unit l">吨</div>
      </div>
    </div>
  </div>-->

</div>

</body>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/echarts.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/urlparas.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/common.js"></script>
<script>
$(function (){
    let param = urlParas(window.location.href.split('#')[0]);
    let type = param.get('type');
    // console.log(type);
    function getMainData(type) {
        getJson('zzp_hxzb_zcp.json',{},function (res) {
            if(res.code == 200){
                // console.log(res)

              for (let i = 0; i < res.data.length; i++) {
                console.log(i);
                let html = `<div class="item l fix">
                  <div class="left-chart l" id="chart${i}"></div>
                  <div class="right-info l">
                    <div class="title">${res.data[i].xmmc || ''}</div>
                    <div class="amount fix">
                      <div class="name l">日产量:</div>
                      <div class="value day l">${res.data[i].rjsl || 0}</div>
                      <div class="unit l">${res.data[i].jldw || ''}</div>
                    </div>
                    <div class="amount fix">
                      <div class="name l">月产量:</div>
                      <div class="value mounth l">${res.data[i].yljsl || 0}</div>
                      <div class="unit l">${res.data[i].jldw || ''}</div>
                    </div>
                  </div>
                </div>`;
                $('.product_page .box').append(html);
                let finish=res.data[i].yljsl
                let unfinish=res.data[i].yjh
                let perc=parseInt(finish/unfinish*100).toString()
                console.log(perc)
                drawRing('chart' + i,perc);
              }
                // if (type=="tonggan"){
                //     $('.title').text(res.data[0].xmmc)
                //     $('.day').text(res.data[0].rjsl)
                //     $('.mounth').text(res.data[0].yljsl)
                // }else if(type=="diannie"){
                //     $('.title').text(res.data[1].xmmc)
                //     $('.day').text(res.data[1].rjsl)
                //     $('.mounth').text(res.data[1].yljsl)
                // }else if(type=="jinchuantong"){
                //     $('.title').text(res.data[2].xmmc)
                //     $('.day').text(res.data[2].rjsl)
                //     $('.mounth').text(res.data[2].yljsl)
                // }else if(type=="diangu"){
                //     $('.title').text(res.data[3].xmmc)
                //     $('.day').text(res.data[3].rjsl)
                //     $('.mounth').text(res.data[3].yljsl)
                // }else if(type=="guangxitong"){
                //     $('.title').text(res.data[4].xmmc)
                //     $('.day').text(res.data[4].rjsl)
                //     $('.mounth').text(res.data[4].yljsl)
                // }else if(type=="liusuannie"){
                //     $('.title').text(res.data[5].xmmc)
                //     $('.day').text(res.data[5].rjsl)
                //     $('.mounth').text(res.data[5].yljsl)
                // }
            }

        })
    }
    getMainData(type)

  drawRing('chart1','76');
  function drawRing(id, data) {
    let chartDom = document.getElementById(id);
    let myChart = echarts.init(chartDom);

    let colors = generateColor('#10e6e7','#1242dd',25);

    let labelData = [],labelData1 = [];
    for (let i = 0; i < 25; ++i) {
      labelData.push({
        value: 1,
        name: i,
        itemStyle: {
          normal: {
            color: 'rgba(0,209,228,0)',
          }
        }
      });
      labelData1.push({
        value: 1,
        name: i,
      });
    }
    let text;
    if(data.includes('%')){
      text = data.replace(/%/ig, '');
    } else{
      text = data;
    }
    text=Number(text);
    for (let i = 0; i < Math.ceil(text/(100/25)); ++i) {
      labelData[i].itemStyle = {
        normal: {
          color: '#'+colors[i]
        }
      }
    }

    let option = {
      fontSize: 14,
      color: '#fff',
      grid: {
        X: 0,
        Y: 0,
        X2: 0,
        Y2: 0,
      },
      title: [
        {
          text: data + '%',
          top: 'middle',
          left: '40',
          textAlign: 'center',
          textStyle: { fontSize: 16, fontWeight: 'bolder', color: '#13fdfd', textAlign: 'center' },
        },
        // {
        //   text: '合计',
        //   left: '50%',
        //   top: '88%',
        //   textAlign: 'center',
        //   textStyle: { fontWeight: 'normal', fontSize: 16, color: '#13fdfd', textAlign: 'center' },
        // },
      ],
      subtext: '',
      subTitleColor: '#fff',
      subTitleFontSize: 14,
      legend: false,

      labelShow: false,
      borderWidth: 2,
      innerRingColor1: '#10e9e7',
      innerRingColor2: '#1242dd',
      polar: { radius: ['36%', '34%'], center: ['50%', '50%'] },
      angleAxis: { max: 100, show: false },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
      },
      series: [
        {
          type: 'pie',
          z: 5,
          radius: ['90%', '87%'],
          center: ['50%', '50%'],
          itemStyle: {
            normal: {
              shadowBlur: 12,
              shadowColor: '#0e829b',
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  { offset: 0, color: '#10e6e7' },
                  { offset: 1, color: '#1242dd' },
                ],
              },
            },
          },
          label: { show: false },
          data: [100],
        },
        // {
        //   name: '',
        //   type: 'bar',
        //   roundCap: true,
        //   barWidth: 50,
        //   data: [data],
        //   coordinateSystem: 'polar',
        //   itemStyle: {
        //     normal: {
        //       color: {
        //         x: 0,
        //         y: 0,
        //         x2: 0,
        //         y2: 1,
        //         type: 'linear',
        //         global: false,
        //         colorStops: [
        //           { offset: 0, color: '#10e9e7' },
        //           { offset: 1, color: '#1242dd' },
        //         ],
        //       },
        //     },
        //   },
        // },
        {
          hoverAnimation: false,
          type: 'pie',
          z: 2,
          data: labelData,
          radius: ['78%', '60%'],
          zlevel: -2,
          itemStyle: { normal: { borderColor: '#180f2a', borderWidth: 2 } },
          label: { normal: { position: 'inside', show: false } },
        },
        {
          hoverAnimation: false,
          type: 'pie',
          z: 1,
          data: labelData1,
          radius: ['78%', '60%'],
          zlevel: -2,
          itemStyle: { normal: { color: '#251f45', borderColor: '#180f2a', borderWidth: 2 } },
          label: { normal: { show: false } },
        },
      ],
    };

    option && myChart.setOption(option);

  }


  function generateColor(colorStart,colorEnd,colorCount){
    /* Convert an RGB triplet to a hex string */
    // The beginning of your gradient
    var start = convertToRGB (colorStart);

    // The end of your gradient
    var end = convertToRGB (colorEnd);

    // The number of colors to compute
    var len = colorCount;

    //Alpha blending amount
    var alpha = 0.0;

    var saida = [];

    for (let i = 0; i < len; i++) {
      var c = [];
      alpha += (1.0/len);

      c[0] = start[0] * alpha + (1 - alpha) * end[0];
      c[1] = start[1] * alpha + (1 - alpha) * end[1];
      c[2] = start[2] * alpha + (1 - alpha) * end[2];

      saida.push(convertToHex (c));

    }

    return saida;
  }

  function convertToRGB (hex) {
    let color = [];
    color[0] = parseInt ((trim(hex)).substring (0, 2), 16);
    color[1] = parseInt ((trim(hex)).substring (2, 4), 16);
    color[2] = parseInt ((trim(hex)).substring (4, 6), 16);
    return color;
  }

  function trim (s) { return (s.charAt(0) == '#') ? s.substring(1, 7) : s }

  function convertToHex (rgb) {
    return hex(rgb[0]) + hex(rgb[1]) + hex(rgb[2]);
  }

  function hex (c) {
    var s = "0123456789abcdef";
    var i = parseInt (c);
    if (i == 0 || isNaN (c))
      return "00";
    i = Math.round (Math.min (Math.max (0, i), 255));
    return s.charAt ((i - i % 16) / 16) + s.charAt (i % 16);
  }
})

</script>
</html>
